import React, { Component } from 'react'
import { Col, Row, Card, Button, Icon,Avatar,Tag,Badge} from 'antd'
import Email from '../email/email'
import Project from '../project/project'
import './main.scss'
const { Meta } = Card;
const CheckableTag = Tag.CheckableTag;
class Dashboard extends Component {
    render() {
        return (
            <Row className="main">
                <div className="left">
                    <Email />
                    <Project />
                </div>
                <div className='right'>
                    <Card title="快速开始">
                        <Row type="flex" align="middle" style={{lineHeight:2,fontSize:14}} >
                            <Col  span={6}><a className="pjSpan">文件管理</a></Col>
                            <Col  span={6}><a className="pjSpan">项目管理</a></Col>
                            <Col  span={6}><a className="pjSpan">员工管理</a></Col>
                            <Col  span={6}><a className="pjSpan">会议管理</a></Col>
                            <Col  span={6}><a className="pjSpan">固定资产</a></Col>
                            <Col  span={6}><a className="pjSpan">审批待办</a></Col>
                            <Tag  szie="small" style={{fontSize:14}}><Icon type='plus'/>添加</Tag>
                        </Row>
                    </Card>

                    <Card 
                    style={{ marginTop: 20 }}
                     title="等待审批"
                      extra={<div><Icon type="left" color="#bababa" /><Icon type="right" style={{ color: "blue" }} /></div>}
                      actions={[<span>同意</span>,<span>拒绝</span>]}
                      >
                        <p style={{fontWeight:"bold",fontSize:14,marginBottom:20}}>月底前需要为公司新成立的部门采购办公用品300套和开业花卉一组，特此申请相应款项。望批准。</p>
                      <Row style={{lineHeight:2,fontSize:14}}>
                        <Row style={{marginLeft:"1%"}}>
                        <Row>
                            <Col span={5} style={{fontWeight:"bold"}}> ID:</Col><Col span={19}>333333333333333333</Col>
                        </Row>
                        <Row>
                            <Col span={5} style={{fontWeight:"bold"}}> 类型:</Col><Col span={19}>差旅费报销</Col>
                        </Row>
                        <Row>
                            <Col span={5}  style={{fontWeight:"bold"}} > 申请人:</Col><Col span={19}>张哲</Col>
                        </Row>
                        <Row>
                            <Col span={5}   style={{fontWeight:"bold"}}> 费用金额:</Col><Col span={19}>100000000000</Col>
                        </Row>
                        </Row>
                    </Row>
                        <Row style={{marginTop:15,fontSize:8}} type="flex" justify="space-between" align="middle">
                        <Badge  status="success" text="5个小时前" /><Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                        </Row>
                     
                    </Card>

                    <Card style={{marginTop: 20,height:417}} hoverable title='今日精选' cover={<img alt="精选图片" style={{height:219}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526477362003&di=7be2c0188d0fcf2575a382635ebbd98f&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fblog%2F201308%2F05%2F20130805225632_f4QcX.thumb.700_0.jpeg" />}>
                        <Meta title="论加班的重要性" description="一个个还不来点赞" />
                        <Row style={{marginTop:15,fontSize:8}} type="flex" justify="space-between" align="middle">
                        <span>5小时前</span> <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                         </Row>
                    </Card>
                </div>
            </Row>
        )
    }
}

export default Dashboard;